<template>
  <view class="wh_750 pageHeight flex flex-column align-center bg_F5F5F5">
    <s-header-title title="申请家谱成员" is-display-back background="#FFFFFF" is-fixed
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height: `${state.pageHeight}px`}"></view>
    <view class="hW_20"></view>
    <view class="inputName flex align-center justify-between">
      <input v-model="state.genealogyNameValue" placeholder="请输入家谱成员姓名"
             placeholder-class="inputName_placeholder"
             confirm-type="search"
             :focus="state.familyNameFocus"
             @confirm="confirm"
      >
      </input>
      <view class="fs_28 color_292929 fw_500"
            style="white-space: nowrap"
            @click.stop="confirm"
      >
        搜索
      </view>
    </view>
    <view class="flex-sub" style="position: relative">
      <scroll-view class="wh_750"
                   style="position: absolute;left: 50%;transform: translateX(-50%);top: 0;height: 100%"
                   scroll-y="true"
      >
        <view class="flex align-center flex-column wh_750">
          <view class="flex align-center flex-column" v-for="(item,index) in state.list" :key="index">
            <view class="hW_20"></view>
            <view class="wh_702 bg_FFFFFF flex align-center justify-between"
                  style="padding: 15rpx 0;border-radius: 8rpx"
            >
              <view class="flex align-center ml_15">
                <view class="fs_28 fw_500 color_FF4206">第{{ item.shi_cn }}世</view>
                <view class="ml_15 fs_28 fw_500 color_4B4B4B">{{ item.surname }}{{ item.name }}</view>
              </view>
              <view class="mr_15 wh_100 hW_40 fs_24 fw_500 bg_FF4206 color_FFFFFF flex align-center justify-center"
                    style="border-radius: 220rpx"
                    @click.stop="selectMember(item)"
              >
                选定
              </view>
            </view>
          </view>
        </view>
        <view class="hW_150"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const state = reactive({
    options: {},
    pageHeight: 0,
    genealogyNameValue: '',
    familyNameFocus: false,
    list: [],
  });
  onLoad((options) => {
    state.options = options;
  });
  onReady(() => {
    state.familyNameFocus = true;
  });
  const getPageHeight = (height) => {
    state.pageHeight = height;
  };

  async function confirm() {
    const { data } = await sheep.$api.genealogy.getGenealogyMemberByCode({
      code: state.options.id,
      name: state.genealogyNameValue,
    });
    state.list = data;
  }

  async function selectMember(item) {
    uni.$emit('selectMember', item);
    uni.navigateBack();
  }
</script>


<style scoped lang="scss">
  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }
</style>
